<template>
    <main-layout title="凌动智能采购系统" :showHome="false">

        <div class="chart-list">
            <div ref="lineChartNode" class="chart-box"></div>
        </div>
        <div class="chart-list">
            <div ref="pieChartNode" class="chart-box"></div>
        </div>
        
        <div class="func-box" v-for="item in funcList" :key="item.name">
            <span class="title">{{item.name}}</span>
            <div class="box">
                <!-- 子功能 -->
                <div class="item" v-for="it in item.children" :key="it.name">
                    <i @click="toPage(it)" :class="['icon', it.icon]" ></i>
                    <span class="text">{{it.name}}</span>
                </div>
            </div>
        </div>
    </main-layout>
</template>

<script>
    import echarts from 'echarts'
    import LineChart from './LineChart'
    import PieChart from './PieChart'
    import { collectionApi, paymentApi } from '../../apis/homeApi'

    export default {

        mixins: [ LineChart, PieChart ],

        data() {
            return {
                funcList: [
                    {name: '基础数据', children: [
                        // 因为在系统开发的时候，会有专门的系统来定义菜单数据，而菜单数据中的编码是一定固定的
                        // 因为菜单和角色、权限，页面的功能都需要这个编码来关联
                        // 需要在功能菜单数据上添加菜单编码
                        // ,,,HOME-01-01,,RECEIVING-01-01,RECEIVING-01-02,SYSTEM-01-01,SYSTEM-01-02,SYSTEM-01-04,SYSTEM-01-05,SYSTEM-01-06
                        {id: '', icon: 'product-list', name: '材料管理', right: 'R', path: ''},
                        {id: '', icon: 'product-new', name: '新建材料', right: 'C', path: ''},
                        {id: '', icon: 'supplier-list', name: '供应商管理', right: 'R', path: ''},
                        {id: '', icon: 'supplier-new', name: '新建供应商', right: 'C', path: ''}
                    ]},
                    {name: '项目管理', children: [
                        {id: 'PROJECT-01-01', icon: 'project-list', name: '项目管理', right: 'R', path: '/project/list'},
                        {id: 'PROJECT-01-02', icon: 'project-new', name: '新建项目', right: 'C', path: '/project/edit'}
                    ]},
                    {name: '采购管理', children: [
                        {id: 'PURCHASE-01-01', icon: 'purchase-list', name: '采购管理', right: 'R', path: '/purchase/list'},
                        {id: 'PURCHASE-01-02', icon: 'purchase-new', name: '新建采购', right: 'C', path: '/purchase/edit'}
                    ]},
                    {name: '收货管理', children: [
                        {id: '', icon: 'receive-list', name: '收货管理', right: 'R', path: ''},
                        {id: '', icon: 'receive-new', name: '新建收货', right: 'C', path: ''}
                    ]},
                    {name: '系统管理', children: [{icon: 'setting', name: '设置', path: '/setting'}]}
                ]
            }
        },

        // 使用计算属性来获取vuex中的权限数据
        computed: {
            myRights() {
                return this.$store.getters['common/userRights']
            }
        },

        mounted() {

            // echarts的第一个方法(init接口)，它用于初始化echarts实例
            // init(dom: HTMLElement)
            // const lineChart = echarts.init(this.$refs.lineChartNode)
            this.lineChart = echarts.init(this.$refs.lineChartNode)

            // 获取数据，然后再数据获取成功以后，再执行数据可视化渲染
            this.getLineData()

            // 实例化饼图echarts实例
            this.pieChart = echarts.init(this.$refs.pieChartNode)
            // 获取piechart的数据
            this.getPieData()

            // // 定义渲染的配置对象
            // let option = {
            //     xAxis: {
            //         type: 'category',
            //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            //     },
            //     yAxis: {
            //         type: 'value'
            //     },
            //     series: [
            //         {
            //             data: [120, 200, 150, 80, 70, 110, 130],
            //             type: 'bar',
            //             showBackground: true,
            //             backgroundStyle: {
            //                 color: 'rgba(180, 180, 180, 0.2)'
            //             }
            //         }
            //     ]
            // }

            // // echarts的第二个方法(接口)，它用于渲染图形
            // lineChart.setOption(option)
        },

        methods: {
            // 获取折线图数据
            async getLineData() {
                let result = await collectionApi()
                if (result.code === 200) this.renderLineChart(result.data)
            },

            // 获取饼图的数据
            async getPieData() {
                let result = await paymentApi()
                if (result.code === 200) this.renderPieChart(result.data)
            },

            // 图标点击，跳转到具体页面
            toPage(route) {
                // route参数是否有完整路由，没有则表示业务还没有开发，提示用户功能还未开发
                if (!route.path) {
                    this.$toast.fail('功能建设中，敬请期待...')
                    return
                }
                
                // 判断是否需要进行权限管控，如果不需要则直接跳转到页面
                if (!route.right) {
                    this.$router.push(route.path)
                    return
                }

                // 需要对用户权限进行判断 -- 首先要有权限数据(当前登录用户对于所有的菜单对应的权限--调用接口获取当前用户的权限--不可能在这里调用接口，所以在登录页面调用)
                // 公司中设计用户权限的时候，不是一个用户对多个菜单权限，用户对应角色(用户在系统中扮演的角色)，角色去挂载权限
                
                // 通过当前菜单的编码找到对应的权限，在判断权限是否具备，如果不具备，则提示用户
                let myRight = this.myRights.find(it => it.id === route.id)
                if (!!myRight && myRight.role.includes(route.right)) {
                    this.$router.push(route.path)
                } else {
                    this.$toast.fail('您不具备访问此功能的权限，请联系管理员')
                }
            }
        },

        beforeDestroy() {
            if (this.timer) clearTimeout(this.timer)
        }
    }
</script>

<style lang="less" scoped>
    @import "./index.less";
</style>